import React, { Component, createRef } from 'react';
import { PageHeader, Button, Space, Table, Tag, Pagination } from 'antd';
import styled from 'styled-components'
import url from '@/config/url'
import axios from '@/http/http'

// 引入模态框组件
import Modalcom from '../../../components/ModalCom';

class Index extends Component {
    constructor() {
        super()
        this.columns = [
            {
                title: '序号',
                dataIndex: 'id', // 表示该列对应的是数组中的那个字段
                align: 'center'
                // render: (text) => <a>{text}</a>,
            },
            {
                title: '用户名',
                dataIndex: 'username',
                align: 'center'
            },
            {
                title: '手机号',
                dataIndex: 'mobile',
                align: 'center'
            },
            {
                title: '邮箱',
                dataIndex: 'email',
                align: 'center'
            },
            {
                title: '性别',
                dataIndex: 'gender',
                render: (text, record, index) => {
                    // 参数分别为当前行的值，当前行数据，行索引
                    // return text == 1 ? <Tag color='red' key={index}>男</Tag> : <Tag color='green' key={index}>女</Tag>
                    if (text == 1) {
                        return <Tag color='red' key={index}>男</Tag>
                    }
                    if (text == 2) {
                        return <Tag color='green' key={index}>女</Tag>
                    }
                    if (text == 3) {
                        return <Tag color='yellow' key={index}>保密</Tag>
                    }
                }
            },
            {
                title: '状态',
                dataIndex: 'status',
                render: (text, record, index) => {
                    // 参数分别为当前行的值，当前行数据，行索引
                    return text == 1 ? <Tag color='green' key={index}>正常</Tag> : <Tag color='red' key={index}>禁用</Tag>
                }
            },
            {
                title: '操作',
                dataIndex: 'action',
                render: (_, record) => (
                    <Space size="middle">
                        <Button type='primary'>编辑</Button>
                        <Button type='danger'>删除</Button>
                    </Space>
                ),
            },
        ];
    }
    state = {
        page: 1, // 当前页数
        data: [], // 表格数组
        total: 0, // 数据总条数
        modalTitle: '', // 子组件模态框中的title 标题
    };
    // 创建引用对象,给子组件或普通元素绑定该属性,
    ref1 = createRef()
    render() {
        return (
            <div>
                <Title>
                    <PageHeader
                        className="site-page-header"
                        title="用户列表"
                        extra={[
                            <Button type="primary" key="1" onClick={this.addUserFn} >
                                添加
                            </Button>,
                        ]}
                    />
                </Title>
                {/* 表格部分 */}
                <Table columns={this.columns} dataSource={this.state.data} pagination={false} rowKey={(record) => { return record.id }} />
                {/* 分页部分 */}
                <Pagination defaultCurrent={this.state.page} total={this.state.total} onChange={this.onChange} />
                {/* 模态框组件  */}
                <Modalcom ref={this.ref1} modalTitle={this.state.modalTitle} loadData={this.loadData}></Modalcom>
            </div>
        );
    };
    componentDidMount() {
        this.loadData()
    };
    // 请求数据列表
    loadData = () => {
        axios.get(url.getuserlist, {
            params: {
                page: this.state.page
            }
        }).then(res => {
            // console.log(res);
            this.setState({
                page: res.data.paginate.current_page, // 当前页数
                data: res.data.paginate.data, // 表格数组
                total: res.data.paginate.total// 数据总条数
            })
        }).catch(e => { })
    }
    // 切换分页
    onChange = (page, pageSize) => {
        // console.log(page, pageSize);
        this.setState({
            page: page
        }, () => {
            this.loadData()
        })
    };
    // 点击添加事件
    addUserFn = () => {
        // 01: 显示模态框
        // console.log(this.ref1);
        this.ref1.current.showModal()
        // 修改模态框标题
        this.setState({
            modalTitle: '添加'
        })
    }
}

const Title = styled.div`
  border: 1px solid rgb(235, 237, 240);
`

export default Index;
